<template>
  <div class="home">
    <div class="container">
      <h1>企业实时招聘信息</h1>
      <div class="panel">
        <div class="swiper">
          <div class="content">
            <div class="item" v-for="(item, index) of currContentList" :key="index">
              <div class="slide-item" :class="{'slide-item-active': slide_item_active}">
                <div class="top">
                  <p class="title">{{item.company_name}}</p>
                  <label class="salary" v-if="item.salary_above === 0 || item.salary_below === 0">面议</label>
                  <label class="salary" v-else>{{item.salary_above/1000}}千元～{{item.salary_below/1000}}千元</label>
                </div>
                <div class="work_position">{{item.job_title}}</div>
              </div>
              <div class="dec">
                <van-notice-bar class="dec" scrollable background="#fff" speed="30" :text="item.description"/>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="scan-content">
        <img src="../../assets/img/scan-content.png" alt="">
        <img class="scan2" src="https://store.wanzhoujob.com/qrcode/touch_screen/src/personal-quick-register.png" alt="">
      </div>
    </div>
  </div>
</template>

<script>
import {JobServ} from "../../api";

const jobServ = new JobServ()

export default {
  name: 'home',
  data () {
    return {
      contentList: [],
      slide_item_active: true
    }
  },
  watch: {
    currContentList () {
      this.slide_item_active = false
      setTimeout(() => {
        this.slide_item_active = true
      }, 1000)
    }
  },
  computed: {
    currContentList () {
      return this.contentList.slice(0, 9)
    }
  },
  methods: {
    async produce () {
      while (this.contentList.length < 20) {
        await jobServ.fetch().then((data) => {
          jobServ.next(data.paginate.has_next)
          this.contentList.push(...data.items)
        }).catch((err) => {
          console.log(err)
        })
      }
    },
    consume () {
      setInterval(() => {
        if (this.contentList.length > 18) {
          this.contentList.splice(0, 9)
          this.produce()
        }
      }, 20000)
    }

  },
  mounted () {
    this.produce()
    this.consume()
  }
}
</script>

<style lang="scss" scoped>
.home {
  width: 100%;
  height: 100vh;
  position: fixed;

  .container {

    h1 {
      color: #ffffff;
      font-size: 18px;
      text-align: center;
      margin-top: 15px;
      letter-spacing: 5px;
    }

    .panel {
      width: 90%;
      margin: 15px auto;
      margin-bottom: 0;
      height: 125px;
      background-color: #ffffff;
      border-radius: 5px;
      padding: 5px;
      box-sizing: border-box;
      overflow: hidden;
      animation: box_shadow 3s infinite;
      transition: .4s linear;

      @keyframes box_shadow {
        0% {
          box-shadow: 0 0 6px #ffffff;
        }
        50%{
          box-shadow: 0 0 3px #fff;
        }
        100% {
          box-shadow: 0 0 6px #ffffff;
        }
      }

      .swiper {
        height: 118px;
      }

      .content {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;

        .item {
          margin: 3px;
          width: 30%;
          height: 33px;
          overflow: hidden;
          padding: 3px;
          transition: .4s linear;
          border-radius: 3px;
          display: flex;
          flex-direction: column;
          justify-content: center;

          .slide-item {
            transform: translateY(-150%);
            transition: .4s linear;

            &.slide-item-active {
              transform: translateY(0);
            }
          }

          .top {
            display: flex;
            justify-content: space-between;
            height: 10px;

            .title {
              font-size: 4px;
              font-weight: 500;
            }

            .salary {
              font-size: 3px;
              color: #e29741;
            }
          }

          .work_position {
            margin-top: 2px;
            width: 30px;
            height: 8px;
            line-height: 8px;
            text-align: center;
            background-color: #399ddf;
            color: #ffffff;
            font-size: 3px;
            border-radius: 2px;
            padding: 0 1px;
          }

          .dec {
            width: 80px;
            height: 10px;
            padding: 0;
            font-size: 3px;
          }
        }
      }
    }

    .scan-content {
      display: flex;
      width: 100%;
      justify-content: flex-end;
      width: 100%;
      height: 50px;
      position: relative;

      img {
        position: absolute;
        height: 100%;
        top: -10px;
        right: 5px;
      }

      .scan2 {
        width: 22px;
        height: 22px;
        position: absolute;
        top: 8px;
        right: 38px;
        border-radius: 2px;
      }
    }
  }
}
</style>
